// composables/lifecycle/useVisibilityChange.js
import { onMounted, onBeforeUnmount, ref } from 'vue'
export function useVisibilityChange() {
  const isPageActive = ref(true)
  const visibilitychangeCallback = () => {
    if (document.visibilityState === 'hidden') {
      console.log('页面不可见')
      isPageActive.value = false
    } else if (document.visibilityState === 'visible') {
      console.log('页面恢复可见')
      isPageActive.value = true
    }
  }

  onMounted(() => {
    document.addEventListener('visibilitychange', visibilitychangeCallback)
  })

  onBeforeUnmount(() => {
    document.removeEventListener('visibilitychange', visibilitychangeCallback)
  })

  return {
    isPageActive
  }
}
